<template>
	<div id="organizationIndex">
		<el-row>
			<!-- 表格查询条件 -->
			<el-col :span="24">
				<el-form :inline="true" ref="stationForm" :model="queryForm">
					<el-form-item><el-input v-model="queryForm.name" placeholder="名称/编号"></el-input></el-form-item>
					<el-form-item><el-input v-model="queryForm.legalPerson" placeholder="主管人"></el-input></el-form-item>
					<el-form-item>
                        <gd_param type="select"
                             paramCode="orgType"
                             placeholder="组织类型"
                             v-model="queryForm.orgType"/>
					</el-form-item>
					<el-form-item>
                        <gd_param type="select"
                             paramCode="orgState"
                             placeholder="经营状态"
                             v-model="queryForm.orgState"/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
						<el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<!-- 数据表格 -->
			<el-col :span="24">
				<el-row>
					<el-col :span="24">
						<el-button
							type="primary"
							icon="el-icon-plus"
							@click="
								dialog.isEdit = false;
								dialog.saveOrEditDiv = true;
								getCascaderData();
							"
						>
							新增信息
						</el-button>
					</el-col>
				</el-row>
				<el-row style="margin-top:10px;">
					<el-col :span="24">
						<el-table
							:data="tableData"
							border
							style="width: 100%"
							row-key="code"
							:default-expand-all="true"
							lazy
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
						>
							<el-table-column prop="name" label="名称"></el-table-column>
							<el-table-column prop="code" label="编号"></el-table-column>
							<el-table-column prop="payGrades" label="组织类型">
								<template slot-scope="scope">
                                    <gd_param type="show"
                                        paramCode="orgType"
                                        v-model="scope.row.orgType"/>
								</template>
							</el-table-column>
							<el-table-column prop="payGrades" label="经营状态">
								<template slot-scope="scope">
                                    <gd_param type="show"
                                        paramCode="orgState"
                                        v-model="scope.row.orgState"/>
								</template>
							</el-table-column>
							<el-table-column prop="legalPerson" label="主管人"></el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="180">
								<template slot-scope="scope">
									<el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
									<el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
									<el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<!-- 添加或修改-业务弹窗 -->
		<el-dialog
			:title="dialog.isEdit == true ? '编辑信息' : '新增信息'"
			:visible.sync="dialog.saveOrEditDiv"
			width="80%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form ref="saveOrEditDataForm" :rules="saveOrEditDataFormRules" :model="saveOrEditData" label-width="100px">
				<el-form-item label="组织编号" prop="code">
					<el-input show-word-limit v-model="saveOrEditData.code" placeholder="请输入组织编号" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="组织名称" prop="name">
					<el-input show-word-limit v-model="saveOrEditData.name" placeholder="请输入组织名称" maxlength="20"></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="6">
						<el-form-item label="上级组织" prop="parentID">
							<el-cascader @change="cascaderChange" v-model="saveOrEditData.parentID" :options="cascaderData" :props="{ checkStrictly: true }"></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="排序号" prop="orderCode">
							<el-input-number v-model="saveOrEditData.orderCode" :min="1" :max="100" label="请定义顺序"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="组织类型" prop="orgType">
                            <gd_param type="select"
                             paramCode="orgType"
                             placeholder="组织类型"
                             v-model="saveOrEditData.orgType"/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="经营状态" prop="orgState">
                            <gd_param type="select"
                             paramCode="orgState"
                             placeholder="经营状态"
                             v-model="saveOrEditData.orgState"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="法人/管理者" prop="legalPerson">
							<el-input show-word-limit v-model="saveOrEditData.legalPerson" placeholder="请输入法人/管理者" maxlength="10"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="员工人数" prop="employeesCount" v-if="formDataShow.employeesCount">
							<el-input show-word-limit type="number" v-model="saveOrEditData.employeesCount" placeholder="员工人数" maxlength="10"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="成立时间" prop="foundedTime" v-if="formDataShow.foundedTime">
							<el-date-picker value-format="yyyy-MM-dd" v-model="saveOrEditData.foundedTime" type="date" placeholder="选择成立时间(年-月-日)"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="组织性质" prop="enterpriseNature" v-if="formDataShow.enterpriseNature">
                            <gd_param type="select"
                             paramCode="enterpriseNature"
                             placeholder="组织性质"
                             v-model="saveOrEditData.enterpriseNature"/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="注册资本" prop="registeredCapital" v-if="formDataShow.registeredCapital">
							<el-input show-word-limit type="number" v-model="saveOrEditData.registeredCapital" placeholder="请输注册资本(单位:万元)" maxlength="10"></el-input>
						</el-form-item>
					</el-col>
				</el-row>



				<el-form-item label="经营范围" prop="natureOfBusiness" v-if="formDataShow.natureOfBusiness">
					<el-input
						show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="对组织的经营范围进行描述"
						v-model="saveOrEditData.natureOfBusiness"
					></el-input>
				</el-form-item>
				<el-form-item label="所在位置" prop="address" v-if="formDataShow.address">
					<el-input
						show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入单位所在位置描述"
						v-model="saveOrEditData.address"
					></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="comment">
					<el-input
						show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="如需备注输入描述"
						v-model="saveOrEditData.comment"
					></el-input>
				</el-form-item>
				<!-- 按钮组 -->
				<el-form-item>
					<el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">{{ dialog.isEdit == false ? '保存' : '确认修改' }}</el-button>
					<el-button
						@click="
							dialog.saveOrEditDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						取消
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 查看-业务弹窗 -->
		<el-dialog title="组织详情" :visible.sync="dialog.showDiv" width="50%" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false">
			<el-form ref="showDataForm" :model="showData" label-width="100px">
				<el-form-item label="组织编号" prop="code">
					<el-tag  effect="plain" v-if="showData.code">{{ showData.code }}</el-tag>
				</el-form-item>
				<el-form-item label="组织名称" prop="name">
					<el-tag  effect="plain" v-if="showData.name">{{ showData.name }}</el-tag>
				</el-form-item>
				<el-row>
					<el-col :span="6">
						<el-form-item label="排序号" prop="orderCode">
							<el-tag  effect="plain" v-if="showData.orderCode">{{ showData.orderCode }}</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="组织类型" prop="orgType">
                            <gd_param type="show" paramCode="orgType" v-model="showData.orgType"/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="经营状态" prop="orgState">
                            <gd_param type="show" paramCode="orgState" v-model="showData.orgState"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="法人/管理者" prop="legalPerson">
							<el-tag  effect="plain" v-if="showData.legalPerson">{{ showData.legalPerson }}</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="员工人数" prop="employeesCount" v-if="formDataShow.employeesCount">
							<el-tag  effect="plain" v-if="showData.employeesCount">{{ showData.employeesCount }}</el-tag>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="成立时间" prop="foundedTime" v-if="formDataShow.foundedTime">
							<el-tag  effect="plain" v-if="showData.foundedTime">{{ showData.foundedTime }}</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="组织性质" prop="enterpriseNature" v-if="formDataShow.enterpriseNature">
                            <gd_param type="show" paramCode="enterpriseNature" v-model="showData.enterpriseNature"/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="注册资本" prop="registeredCapital" v-if="formDataShow.registeredCapital">
							<el-tag  effect="plain" v-if="showData.registeredCapital">{{ showData.registeredCapital }}万元</el-tag>
						</el-form-item>
					</el-col>
				</el-row>



				<el-form-item label="经营范围" prop="natureOfBusiness" v-if="formDataShow.natureOfBusiness">
					<el-tag  effect="plain" v-if="showData.natureOfBusiness">{{ showData.natureOfBusiness }}</el-tag>
				</el-form-item>
				<el-form-item label="所在位置" prop="address" v-if="formDataShow.address">
					<el-tag  effect="plain" v-if="showData.address">{{ showData.address }}</el-tag>
				</el-form-item>
				<el-form-item label="备注" prop="comment">
					<el-tag  effect="plain" v-if="showData.comment">{{ showData.comment }}</el-tag>
				</el-form-item>
				<!-- 按钮组 -->
				<el-form-item>
					<el-button
						@click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						关闭
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import gd_param from "@/components/mycomponents/gd_param.vue";
import * as axiosAPI from '@/api/org.js';
export default {
	name: 'organizationIndex',
    components:{gd_param},
	data() {
		return {
			//查询表单数据
			queryForm: {
				name: null,
				legalPerson: null,
				orgType: null,
				orgState: null
			},
			//表格数据
			tableData: [],
			//主表-分页数据
			pageData: {
				page: 1,
				limit: 10,
				total: 0
			},
			//当前表格复选数据
			nowTableSelected: [],
			//弹窗状态
			dialog: {
				isEdit: false,
				saveOrEditDiv: false,
				showDiv: false
			},
			//添加或编辑表单数据
			saveOrEditData: {
				organizationID: null,
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				levelCode: 1,
				orderCode: 1,
				orgType: null,
				legalPersonID: null,
				legalPerson:null,
				address:null,
				addressLongitude:null,
				addressLatitude:null,
				registeredCapital:null,
				foundedTime:null,
				enterpriseNature:null,
				natureOfBusiness:null,
				employeesCount:null,
				orgState:null
			},
			//组织选择级联下拉数据
			cascaderData: [],
			//添加编辑表单-检验
			saveOrEditDataFormRules: {
				code: { required: true, message: '请输入岗位编号', trigger: 'blur' },
				name: { required: true, message: '请输入岗位名称', trigger: 'blur' },
				parentID: { required: true, message: '请选择上级组织', trigger: 'change' },
				orgType: { required: true, message: '请选择组织类型', trigger: 'change' },
				orderCode: { required: true, message: '请选择排序号', trigger: 'blur' },
				legalPerson: { required: true, message: '请输入法人或主管人', trigger: 'blur' },
				orgState: { required: true, message: '请选择经营状态', trigger: 'change' }
			},
			//展示表单数据
			showData: {
				organizationID: null,
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				levelCode: 1,
				orderCode: 1,
				orgType: null,
				legalPersonID: null,
				legalPerson:null,
				address:null,
				addressLongitude:null,
				addressLatitude:null,
				registeredCapital:null,
				foundedTime:null,
				enterpriseNature:null,
				natureOfBusiness:null,
				employeesCount:null,
				orgState:null
			},
			//表单加载值
			formLoading: false,
			//表单数据填写显示方法
			formDataShow:{
				address:false,
				registeredCapital:false,
				foundedTime:false,
				enterpriseNature:false,
				natureOfBusiness:false,
				employeesCount:false
			}
		};
	},
	mounted() {
		this.getTableDatas();
	},
	methods: {

		//组织类型切换
		orgTypeChange(data){
			if(data=="1"){//集团
				this.formDataShow = {
					address:true,
					registeredCapital:true,
					foundedTime:true,
					enterpriseNature:true,
					natureOfBusiness:true,
					employeesCount:true
				};

			}else if(data=="2"){//区域
				this.formDataShow = {
					address:false,
					registeredCapital:false,
					foundedTime:true,
					enterpriseNature:false,
					natureOfBusiness:false,
					employeesCount:true
				};
				this.saveOrEditData.registeredCapital = null;
				this.saveOrEditData.enterpriseNature = null;
				this.saveOrEditData.natureOfBusiness = null;
				this.saveOrEditData.address = null;
			}else if(data=="3"){//公司
				this.formDataShow = {
					address:true,
					registeredCapital:true,
					foundedTime:true,
					enterpriseNature:true,
					natureOfBusiness:true,
					employeesCount:true
				};
			}else if(data=="4"){//店铺
				this.formDataShow = {
					address:true,
					registeredCapital:false,
					foundedTime:true,
					enterpriseNature:false,
					natureOfBusiness:true,
					employeesCount:true
				};
				this.saveOrEditData.registeredCapital = null;
				this.saveOrEditData.enterpriseNature = null;
			}else if(data=="5"){//部门
				this.formDataShow = {
					address:false,
					registeredCapital:false,
					foundedTime:true,
					enterpriseNature:false,
					natureOfBusiness:false,
					employeesCount:true
				};
				this.saveOrEditData.address = null;
				this.saveOrEditData.registeredCapital = null;
				this.saveOrEditData.enterpriseNature = null;
				this.saveOrEditData.natureOfBusiness = null;
			}else{//被清空
				this.formDataShow = {
					address:false,
					registeredCapital:false,
					foundedTime:false,
					enterpriseNature:false,
					natureOfBusiness:false,
					employeesCount:false
				};
				this.saveOrEditData.address = null;
				this.saveOrEditData.registeredCapital = null;
				this.saveOrEditData.enterpriseNature = null;
				this.saveOrEditData.natureOfBusiness = null;
				this.saveOrEditData.foundedTime = null;
				this.saveOrEditData.employeesCount = null;
			}

		},
		//查询表格数据
		getTableDatas() {
			let _this = this;
            axiosAPI.pages(_this.queryForm)
				.then(function(response) {
					if (response.code == '0000') {
						let treeData = _this.$myUtil.list2TreeData(response.data,"-1", 'organizationID');
						console.dir(treeData);
						_this.tableData = treeData;
					}
				});
		},
		//查询级联下拉数据
		getCascaderData(id) {
			let _this = this;
            axiosAPI.pages(_this.queryForm)
			.then(function(response) {
				if (response.code == '0000') {
					let treeData = _this.$myUtil.listToCascaderTreeData(response.data, 'organizationID', 'name', 'organizationID', id);
					console.dir(treeData);
					_this.cascaderData = treeData;
				}
			});
		},
		//级联下拉数据切换
		cascaderChange(data){
			if(data.length>0){
				this.saveOrEditData.parentID = data[data.length-1];
				this.saveOrEditData.levelCode = data.length;
			}else{
				this.saveOrEditData.parentID = "-1";
				this.saveOrEditData.levelCode = 1;
			}

		},
		//重置查询条件表单
		resetQueryForm() {
			this.queryForm = {
				name: null,
				legalPerson: null,
				orgType: null,
				orgState: null
			};
			this.getTableDatas();
		},
		//重置添加、编辑、展示表单
		resetAddOrEditOrShowForm() {
			this.showData = {
				organizationID: null,
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				levelCode: 1,
				orderCode: 1,
				orgType: null,
				legalPersonID: null,
				legalPerson:null,
				address:null,
				addressLongitude:null,
				addressLatitude:null,
				registeredCapital:null,
				foundedTime:null,
				enterpriseNature:null,
				natureOfBusiness:null,
				employeesCount:null,
				orgState:null
			};
			this.saveOrEditData = {
				organizationID: null,
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				levelCode: 1,
				orderCode: 1,
				orgType: null,
				legalPersonID: null,
				legalPerson:null,
				address:null,
				addressLongitude:null,
				addressLatitude:null,
				registeredCapital:null,
				foundedTime:null,
				enterpriseNature:null,
				natureOfBusiness:null,
				employeesCount:null,
				orgState:null
			};
		},
		//提交-添加、编辑表单
		submitSaveOrEdit() {
			let _this = this;
			this.$refs.saveOrEditDataForm.validate(valid => {
				if (valid) {
					this.formLoading = true;
					let _this = this;

                    if(_this.dialog.isEdit == true){

                        axiosAPI.update(_this.saveOrEditData)
                        .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
                        });

                    }else{
                        axiosAPI.add(_this.saveOrEditData)
                        .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
                        });
                    }
				} else {
					return false;
				}
			});
		},
		//提交-删除
		submitDelete(ids) {
			let _this = this;
            axiosAPI.deletes(ids)
				.then(res => {
					if (res.code == '0000') {
						_this.getTableDatas();
					}
				});
		},
		//行-查看
		rowShow(data) {
			this.showData = JSON.parse(JSON.stringify(data));
			this.dialog.showDiv = true;
		},
		//行-编辑
		rowEdit(data) {
			this.getCascaderData(data.organizationID);
			this.dialog.saveOrEditDiv = true;
			this.saveOrEditData = JSON.parse(JSON.stringify(data));
			this.dialog.isEdit = true;

		},
		//行-删除
		rowDelete(data) {
			this.$confirm('删除将会删除子集组织数据，确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.submitDelete(data.innerCode);
			});
		},
		//点击批量删除
		moreDeletes() {
			if (this.nowTableSelected.length <= 0) {
				this.$notify.warning({
					title: '删除提示',
					message: '请至少选择一条数据再删除'
				});
				return;
			}
			let ids = '';

			for (var i in this.nowTableSelected) {
				ids += this.nowTableSelected[i].innerCode + ',';
			}

			ids = ids.substring(0, ids.length - 1);

			//调用删除
			this.submitDelete(ids);
		},
		//表格批量选择
		tableDataSelected(data) {
			this.nowTableSelected = data;
		}
	}
};
</script>

<style scoped></style>
